/*
* xxxx科技有限公司版权所有（）.
* Copyright (c) 2019, and/or its affiliates. All rights reserved.
* @Date: 2020.08.03 21:52.
* @Author
* @Description  订单 详情 页面
**/
<template>
  <div class="ca-detail">
    <div class="ca-card">
      <!-- 订单名称 -->
      <ul class="ca-status">
        <li class="ca-name">
          {{ commodity && commodity.commodity }}
          <span :class="getStatus(payStatus)">{{ statusObj[payStatus] }}</span>
        </li>
      </ul>

      <!-- 0->待使用、 2->待支付、 3->已使用、 4->退款成功、 5->已取消 -->
      <!-- mid 券码 || payStatus == '3' -->
      <p class="ca-code" v-show="payStatus == '0'">
        券号码：{{ commodity && commodity.payNum }}
      </p>
      <p class="ca-code" v-if="payStatus == '2'">
        剩余时间 0{{ minute }}分{{ second < 10 ? "0" + second : second }}秒
      </p>
      <img
        :class="{ opacity: payStatus == '3', 'ca-s-img': true }"
        :src="qrImgUrl"
        v-show="payStatus == '0'"
      />

      <!-- mid 立即支付状态 -->
      <el-button
        :disabled="disabled"
        @click="handleContinueClick"
        class="ca-btn"
        round
        type="primary"
        v-if="payStatus == '2'"
        >立即取消</el-button
      >

      <!-- bottom -->
      <ul class="ca-info-list">
        <li v-show="payStatus == '4' || payStatus == '3'">
          券号码
          <time
            :class="{
              decoration: payStatus == '4',
              underline: payStatus == '3',
              fr: true,
            }"
          >
            {{ commodity && commodity.payNum }}</time
          >
        </li>
        <li v-show="payStatus == '0'">
          有效期
          <time class="fr">
            {{ (commodity && commodity.validTime) || "暂无 validTime" }}</time
          >
        </li>
        <li v-show="payStatus == '4'">
          退款日期
          <time class="fr"> {{ commodity && commodity.checkTime }}</time>
        </li>
        <li v-show="payStatus == '3'">
          核销日期
          <time class="fr">
            {{
              (commodity && commodity.veriftyTime) || "暂无 veriftyTime"
            }}</time
          >
        </li>
        <li v-show="payStatus == '5'">
          取消时间
          <time class="fr">
            {{ (commodity && commodity.cancelTime) || "暂无cancelTime" }}</time
          >
        </li>
        <li>
          订单编号
          <time class="fr"> {{ commodity && commodity.orderId }}</time>
        </li>
        <li v-show="payStatus == '0' || payStatus == '3' || payStatus == '4'">
          购买时间
          <time class="fr"> {{ commodity && commodity.payTime }}</time>
        </li>
        <li v-show="payStatus == '2' || payStatus == '5'">
          创建时间
          <time class="fr"> {{ commodity && commodity.createTime }}</time>
        </li>
        <li v-show="payStatus == '3'">
          核销点
          <time class="fr">
            {{
              (commodity && commodity.petrolstationname) ||
              "暂无 petrolstationname"
            }}</time
          >
        </li>
      </ul>
    </div>
    <!-- 脚部 -->
    <footer-bar></footer-bar>
  </div>
</template>

<script>
import QRCode from "qrcode";
import urls from "@/api/urls";
import { getData, postData } from "@/api/";
import footerBar from "@/views/Footer/";
import { statusObj } from "@/utils/const";
import dayjs from "dayjs";

export default {
  name: "CardDetail",
  props: {},
  components: { footerBar },
  data() {
    return {
      id: "",
      payStatus: "", // 券码状态
      minute: 4, // 分钟
      second: 60, // 秒
      timer: null,
      qrImgUrl: "",
      qrTimer: null, // 定时更新 待支付的券状态
      disabled: false,
      statusObj: statusObj,
      commodity: {
        id: "", // 商品id
        payNum: "", // 加码值
        orderId: "", // 订单号
        payTime: "", // 支付时间
        orderName: "", // 商品名称
        commodity: "",
        payStatus: "", // 券码状态
        validTime: "", // 有效时间
        checkTime: "", // 退款时间
        cancelTime: "", // 取消时间
        createTime: "", // 创建时间
        veriftyTime: "", //核销时间
        petrolstationname: "", // 核销地址
      },
      payParams: {}, // 调用微信支付所需的参数
      orderNum: "", // 存储 openid 下的 订单号
    };
  },
  watch: {},
  created() {
    window.onpopstate = function () {};
    this.id = this.$route.params.id; // orderId
    console.log("this.$route.params--------", this.$route.params.id);
    this.getDetail(); // 获取详情
  },
  mounted() {},
  methods: {
    /**
     *@Description <!-- 0->待使用、 2->待支付、 3->已使用、 4->退款成功、 5->已取消 -->
     *@Return 获取单个 -- 商品 数据信息.
     **/
    getDetail() {
      getData({ orderId: this.$route.params.id }, urls.orderDetail).then(
        (res) => {
          console.log("获取单个 -- 订单 数据信息-----------", res);
          this.commodity = res.result;
          this.payStatus = res.result && res.result.payStatus;
          this.getStatus(this.payStatus);
          const qrId = this.commodity.payNum || "DX622254638";
          this.getQRCode(qrId);

          if (this.payStatus == "2") {
            this.remainingTime();
          }
          if (this.payStatus == "0") {
            // 待支付状态 轮询二维码是否被扫描 - 更改状态
            this.qrTimer = setTimeout(() => {
              this.getDetail();
            }, 3000);
          } else {
            this.qrTimer && clearTimeout(this.qrTimer);
          }
        }
      );
    },
    /**
     *@Description
     *@Return 立即支付 修改成 立即取消 -- 服务端 支持不了二次 支付 真特么的无语.
     **/
    handleContinueClick() {
      this.timer && clearInterval(this.timer);
      // this.orderNum = localStorage.getItem('openId')  // 获取 openid -- 得到 openid 下的拉起微信支付的参数
      // this.orderNum = localStorage.getItem('订单号')  // 获取 订单号 -- 得到 订单号 下的拉起微信支付的参数
      // this.payParams = JSON.parse(localStorage.getItem(this.orderNum)) // 获取 openid 下的待支付订单 - 拉起微信支付的参数 --- 此法不可靠

      // 调用下单接口
      // const openIdParams = {
      //   id: localStorage.getItem(this.orderNum), // 订单id --- 在立即购买页面 存储了 订单id，存储在 openid下面
      //   openId: localStorage.getItem('openId'), // openId
      // }
      // getData(openIdParams, urls.goodsInfoUrl).then(result => { // 获取拉起支付的 参数
      //   const data = JSON.parse(result.data)
      //   const payData = JSON.parse(data.pay_data)
      //   this.payParams = payData
      // })

      // this.wxpay() // 拉起支付
      // console.log('立即支付-----', this.orderNum)
    },
    /**
     *@Description // 0->待使用、 2->待支付、 3->已使用、 4->退款成功、 5->已取消
     *@Return 列表点击 事件监听.
     **/
    getStatus(type) {
      if (type == "0") {
        return "status0 fr";
      }
      if (type == "2") {
        return "status2 fr";
      }
      if (type == "3") {
        return "status3 fr";
      }
      if (type == "4") {
        return "status4 fr";
      }
      if (type == "5") {
        return "status5 fr";
      }
    },
    /**
     *@Description
     *@Return 获取单个 -- 商品 数据信息.
     **/
    getQRCode(data) {
      QRCode.toDataURL(data)
        .then((url) => {
          this.qrImgUrl = url;
        })
        .catch((err) => {
          console.error("QRCode err:", err);
        });
    },
    /**
     *@Description 注：创建时间 + 5分钟 - 当前时间
     *@Return 待支付 -- 定时器.
     **/
    remainingTime() {
      const nowData = new Date().getTime();
      const time = this.commodity.createTime;
      const createTime = new Date(time).getTime(); // 创建时间
      const countDown = createTime + 5 * 60 * 1000; // 毫秒 - 创建时间 + 5分钟 作为倒计时 起点
      // const diff = Math.floor((nowData - createTime) / 1000)   // 得到时间差 - 秒
      const diff = Math.floor((countDown - nowData) / 1000); // 得到时间差 - 秒 ---- 创建时间+5分钟 和当前时间相减 <= 0 的时候立即调用失效接口

      console.log("time---createTime-diff-", time, createTime, countDown, diff);
      if (diff <= 0) {
      } else {
        this.minute = Math.floor(diff / 60);
        this.second = diff - this.minute * 60;
        this.timer = setInterval(() => {
          this.second--;
          console.log("this.second秒-------", this.second);
          if (this.second < 0) {
            clearInterval(this.timer);
          }
          if (this.second == 0) {
            this.minute--;
            console.log("this.minute分钟-------", this.minute);

            this.second = 60;
            if (this.minute < 1) {
              this.minute = 0;
              this.second = 0;
              this.disabled = true;
              const statusParams = {
                type: "5",
                orderId: this.id,
              };

              clearInterval(this.timer);
            }
          }
        }, 1000);
      }
    },
    /**
     *@Description
     *@Return 拉起微信支付.
     **/
    wxpay() {
      if (typeof WeixinJSBridge == "undefined") {
        if (document.addEventListener) {
          document.addEventListener(
            "WeixinJSBridgeReady",
            this.onBridgeReady,
            false
          );
        } else if (document.attachEvent) {
          document.attachEvent("WeixinJSBridgeReady", this.onBridgeReady);
          document.attachEvent("onWeixinJSBridgeReady", this.onBridgeReady);
        }
      } else {
        this.onBridgeReady();
      }
    },
    /**
     *@Description
     *@Return 支付.
     **/
    onBridgeReady() {
      WeixinJSBridge.invoke("getBrandWCPayRequest", this.payParams, (res) => {
        console.log("get_brand_wcpay_request:ok--------", res);
        if (res.err_msg == "get_brand_wcpay_request:ok") {
          localStorage.setItem(this.orderNum, "");
          const url =
            "http://sandlife.xajhzx.cn/h5/index.html" +
            localStorage.getItem("paySearchUrl") +
            "#/use-list/123";
          window.location.href = url;
          // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
        }
      });
    },
  },
  beforeDestroy() {
    this.timer && clearInterval(this.timer);
    this.qrTimer && clearTimeout(this.qrTimer);
  },
};
</script>
<style lang="scss" scoped>
.ca-detail {
  margin: 0 auto;
  padding: 25px;
}
.ca-card {
  border-radius: 4px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}
/* top */
.ca-status {
  margin-bottom: 20px;
  padding: 18px;
  border-bottom: 1px dashed #dcdcdc;
}
.ca-name {
  font-size: 18px;
  margin-bottom: 5px;
  // 0->待使用、 2->待支付、 3->已使用、 4->退款成功、 5->已取消
  .status0 {
    color: #e83636; /* 待使用 */
  }
  .status2 {
    color: #ffaa00; /* 待支付 */
  }
  .status3 {
    color: #707070; /* 已使用 */
  }
  .status4 {
    color: #0098ff; /* 退款成功*/
  }
  .status5 {
    color: #9b9b9b; /* 已取消*/
  }
}
.ca-code {
  font-size: 12px;
  text-align: center;
  color: #000;
}
/* mid */
.ca-s-img {
  display: block;
  width: 50%;
  margin: 10px auto;
}
/* bottom */
.ca-info-list {
  padding: 24px;
  li {
    padding: 8px 0;
    color: #000;
  }
  time {
    opacity: 0.65;
  }
}
// 已使用 二维码透明
.opacity {
  opacity: 0.4;
}
/* 按钮 */
.ca-btn {
  font-size: 18px;
  display: block;
  width: 50%;
  margin: 20px auto;
}
.decoration {
  text-decoration: line-through;
}
.underline {
  text-decoration: line-through;
}
</style>
